<!-- home -->
<template>
  <div class="index-container">
<!--    <van-swipe style="height: 300px; width: 100%; margin-top: 70px" :autoplay="3000">-->
<!--      <van-swipe-item v-for="(image, index) in images" :key="index" style="height: 100%; width: 100%">-->
<!--        <van-image v-lazy="image"  fit="cover" />-->
<!--      </van-swipe-item>-->
<!--    </van-swipe>-->
    <van-image
fit="contain"
                src="
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-coolplay-static/5b6c2fd0-4920-11eb-97b7-0dc4655d6e68.jpg" />
    <van-divider>课程公告</van-divider>

    <van-card
      v-for="(item, index) in noticeList"
      :key="index"
      :desc="item.author"
      :title="item.title"
      thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      @click="NotcieInfo(item.cid, item.context)"
    />
    <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
      <van-cell-group>
        <van-cell title="课程" style="margin-top: 5px">
          <div>
            {{ CourseInfo.name }}
          </div>
        </van-cell>
        <van-cell title="课程描述" style="margin-top: 5px">
          <div>
            {{ CourseInfo.description }}
          </div>
        </van-cell>
        <van-cell title="课程学分" style="margin-top: 5px">
          <div>
            {{ CourseInfo.point }}
          </div>
        </van-cell>
        <van-cell title="公告内容" style="margin-top: 5px">
          <div slot="label" v-html="`${COURSERCONTEXT}`"></div>
        </van-cell>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage } from 'vant'

Vue.use(VanImage)
export default {
  data() {
    return {
      images: ['https://vkceyugu.cdn.bspapp.com/VKCEYUGU-coolplay-static/5b6c2fd0-4920-11eb-97b7-0dc4655d6e68.jpg'],
      noticeList: [],
      CourseInfo: [],
      show: false,
      COURSERCONTEXT: ''
    }
  },

  computed: {},

  created() {
    this.NoticeList()
  },
  methods: {
    async NoticeList() {
      const data = await this.$api.notice.getNoticeList()
      console.log(data)
      this.noticeList = data.data.content
    },
    async NotcieInfo(cid, context) {
      const data = await this.$api.notice.getCourseById(cid)
      // console.log(data)
      this.CourseInfo = data.data.content[0]
      this.show = true
      console.log(this.CourseInfo)
      this.COURSERCONTEXT = context
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 4px;
  overflow-y: auto;
}
</style>
